<!--
 * @Author: C.
 * @Date: 2023-03-09 08:47:33
-->
<template>
  <BasicTable @register="registerTable" class="p-4">
    <template #bodyCell="{ column, record }">
      <!-- <a-button type="link" :size="size">Link</a-button> -->
      <template v-if="column.key === 'meta'">
        <Button type="link" @click="toPage(record.name)"
          ><Icon :icon="record.meta.icon" v-if="record.meta.icon" />{{
            t(record.meta.title)
          }}</Button
        >
        <Tag v-if="record.meta.orderNo">{{ record.meta.orderNo }}</Tag>
      </template>
    </template>
  </BasicTable>
</template>
<script lang="ts" setup>
  import { Button, Tag } from 'ant-design-vue';
  import { useRouter } from 'vue-router';

  import { BasicTable, useTable } from '/@/components/Table';
  import { asyncRoutes } from '/@/router/routes/index';
  import Icon from '/@/components/Icon';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { tableColumns } from './config';
  const { t } = useI18n();
  const { push } = useRouter();
  const [registerTable] = useTable({
    columns: tableColumns,
    dataSource: asyncRoutes,
    canResize: true,
    title: '路由表',
    autoCreateKey: true,
    showTableSetting: true,
    showIndexColumn: false,
    rowKey: 'name',
    pagination: {
      pageSize: 20,
    },
  });
  function toPage(name) {
    push({
      name,
    });
  }
</script>
<style lang="less" scoped></style>
